<template>
  <view class="container">
		<nav-ber :title="'试卷答题'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="font_wi">
			{{ name }}
		</view>
		<u-divider></u-divider>
		<view class="province">
			<view class="pro_mar" v-for="(item, indexs) in topicList" :key="indexs">
				<view class="text_color">
					{{ indexs+1 + '、' }}{{ item.topic }} {{ item.type != 0? '(不定项选择)' : '' }}
				</view>
				<view v-if="item.type == 0">
					 <u-radio-group
						v-model="item.modexz"
						placement="column"
						@change="groupChange"
						>
						<u-radio
							:customStyle="{marginBottom: '40px'}"
							v-for="(itemMin, index) in item.answerList"
							shape="square"
							:key="itemMin.id"
							:label="itemMin.topic"
							:name="itemMin.type"
						>
						</u-radio>
					</u-radio-group>
				</view>
				<view v-if="item.type == 1">
						<u-checkbox-group
						 v-model="item.modexz"
						 placement="column"
						 @change="checkboxChange"
						 >
							 <u-checkbox
								 :customStyle="{marginBottom: '40px'}"
								 v-for="(itemMin, index) in item.answerList"
								 :key="index"
								 :label="itemMin.topic"
								 :name="itemMin.type"
							 >
							 </u-checkbox>
						</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="addQues">
			<u-button type="primary" @click="addFun" text="提交"></u-button>
		</view>
		<u-modal v-if="show" :show="show" @confirm="confirm" :content='content'></u-modal>
  </view>
</template>
<script>
	import { getActivate, personalPaper } from '@/api/mytaskManagement.js'
  export default {
    data() {
			return {
				show: false,
				content: '',
				topicList: [],
				id: '',
				name: '',
			}
    },
		methods: {
			confirm() {
				uni.navigateBack({
					delta: 1,
				})
			},
			addFun() {
				let answerList = []
				let msg = null
				this.topicList.forEach((val) => {
					if (!val.modexz) {
						msg = true
					} else {
						answerList.push({
							answerType: typeof val.modexz == 'object'? val.modexz.join(',') : val.modexz,
							topicId: val.id,
							paperTopicId: val.paperTopicId,
							seq: val.seq
						})
					}
					
				})
				if (msg) {
					uni.showToast({
					  title: '请答完所有题目',
					  icon: "none",
					  duration: 2000
					})
					return
				}
				personalPaper({
					answerList,
					paperId: this.id
				}).then((res) => {
					this.content = res.msg
					this.show= true
				})
			},
			getActivateFun() {
				getActivate().then((res) => {
					this.id = res.data.id
					this.name = res.data.name
					this.topicList = res.data.topicList.slice(0,4)
					setTimeout(() => {
						this.topicList = [...this.topicList, ...res.data.topicList.slice(4,res.data.topicList.length)]
					}, 500)
				})
			},
			groupChange() {
				console.log('groupChange112', this.listData);
				
			},
			checkboxChange() {
				console.log('1245125', this.listData);
				
			},
		},
		mounted() {
			this.getActivateFun()
		},
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		// margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.font_wi {
		font-weight: 900;
		text-align: center;
		margin-top: 20rpx;
		font-size: 36rpx;
	}
	.text_color {
		font-weight: 600;
		color: #111;
		margin-bottom: 20rpx;
	}
	.pro_mar {
		margin-bottom: 40rpx;
	}
	.addQues {
		width: 500rpx;
		border-radius: 100rpx;
		margin: auto;
		overflow: hidden;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
</style>
